<template>
    <ul class="side-list">
        <side-item
           v-for="(item, index) of sideData"
           :data="item"
           :routerName="routerName"
           :key="index"
           @changeRouter="changeRouter"
        >
        </side-item>
    </ul>
</template>

<script>
    import SideItem from './Item'

    import { onMounted } from 'vue';

    export default {
        name: "SideList",
        props: {
            sideData: Object,
            routerName: String
        },
        components: {
            SideItem
        },
        setup(props, context) {

            const changeRouter = (text) => {
                context.emit('changeRouter', text)
            }

            return {
                changeRouter
            }
        }
    }
</script>

<style lang="scss" scoped>
.side-list {
    width: 200px;
    color: white;
}
</style>